<!-- 聊天列表 -->
<template>
  <div class="msg-list">
    <ul>
      <li
        v-for="item in searchedChatList"
        v-if="searchedChatList"
        :class="{ active: item.id === selectId }"
        class="session-list"
        @click="selectSession(item.id)"
      >
        <div class="list-left">
          <img :alt="item.user.username" :src="item.user.img" class="avatar" height="42" width="42">
        </div>

        <div class="list-right">

          <p class="name">{{ item.user.username }}</p>
          <span class="time">{{ item.messages[item.messages.length - 1].date | time }}</span>
          <p class="last-msg">{{ item.messages[item.messages.length - 1].content }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex'
import { formatDate } from '@/utils/dateFormat'

export default {
  name: 'ChatList',
  computed: {
    ...mapState([
      'selectId',
      'searchText'
    ]),
    ...mapGetters([
      'searchedChatList'
    ])
  },
  methods: {
    ...mapActions([
      'selectSession'
    ])
  },
  filters: {
    // 将日期过滤为 hour:minutes
    time(date) {
      return formatDate(date, 'hh:mm')
    }
  }
}
</script>

<style lang="stylus" scoped>
.msg-list
  height: 540px
  overflow-y: auto

  .session-list
    display: flex
    padding: 12px
    transition: background-color .1s
    font-size: 0

    &:hover
      background-color: rgb(220, 220, 220)

    &.active
      background-color: #c4c4c4

    .avatar
      border-radius: 2px
      margin-right: 12px

    .list-right
      position: relative
      flex: 1
      margin-top: 4px

    .name
      display: inline-block
      vertical-align: top
      font-size: 14px

    .time
      float: right
      color: #999
      font-size: 10px
      vertical-align: top

    .last-msg
      position: absolute
      font-size: 12px
      width: 130px
      height: 15px
      line-height: 15px
      color: #999
      bottom: 4px
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
</style>
